<template>
  <div class="my-container" v-if="userInfo">
    <div class="header">
      <!-- <img :src="userInfo.avatar" alt="" /> -->
      <van-image round width="5rem" height="5rem" :src="userInfo.avatar" />
      <span class="nickname">{{ userInfo.nickname }}</span>
    </div>
    <!-- 中间的cell -->
    <div>
      <van-cell title="会员中心" is-link />
      <van-cell title="我的订单" is-link />
      <van-cell title="收货地址" is-link />
      <van-cell title="我的足迹" is-link />
      <van-cell title="我的收藏" is-link />
      <van-cell title="意见反馈" is-link />
    </div>
    <div class="footer">
      <van-button type="primary" round block @click="logout">退出</van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { showConfirmDialog } from 'vant'
import { getUserInfo } from '@/api/user'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'
const store = useUserStore()
const router = useRouter()
const userInfo = ref(null)

const getUserInfoData = async () => {
  const res = await getUserInfo()
  userInfo.value = res.data
}

getUserInfoData()

// 退出登录
const logout = () => {
  showConfirmDialog({
    title: '提示',
    message: '确认退出吗？'
  })
    .then(() => {
      // on confirm
      store.setToken('')

      // 跳转到登录页（登录页不能再返回到当前我的信息页面）
      // router.push('/login')
      // 把当前页面 /my，替换掉，把它从路由栈中移除掉
      router.replace('/login')
    })
    .catch(() => {
      // on cancel
    })
}
</script>

<style lang="scss" scoped>
.my-container {
  .header {
    width: 100%;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #c82519;
    flex-direction: column;
    .nickname {
      margin-top: 20px;
      color: white;
      font-size: 18px;
    }
    img {
      width: 90px;
      height: 90px;
      border-radius: 45px;
    }
  }
  .footer {
    padding: 30px 10px 0px;
  }
}
</style>
